<template>
  <div class="public">
    <div class="header-box">
      <van-icon name="arrow-left" size="27px" color="#777" @click="changeToback" />
      <b>我的二手房</b>
      <span>发布</span>
    </div>
    <div class="addMySecond">
      <!-- 基本信息 -->
      <p class="add-title">基本信息</p>
      <!-- 1.小区名称 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.housingName" label="小区名称" placeholder="请输入小区名称" />
      </div>
      <!-- 2.所属区域 -->
      <div class="add-input">
        <span>所属区域</span>
        <p>
          <van-cell is-link :title="title.tit1" @click="show.actions1 = true" />
          <van-action-sheet v-model="show.actions1" :actions="actions1" @select="onSelect1" />
        </p>
        <!-- <van-cell title="显示分享面板" @click="showShare = true" />
        <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" /> -->
      </div>
      <!-- 3.所在地址 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.area" label="所在地址" placeholder="请输入详细地址,精确到路名" />
      </div>
      <p class="add-title">房屋信息</p>
      <div class="add-input">
        <span>所属区域</span>

        <p>
          <van-cell is-link :title="title.tit2" @click="show.actions2 = true" />

          <van-action-sheet v-model="show.actions2" :actions="actions2" @select="onSelect2" />
        </p>
      </div>
      <!-- 房屋面积 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.houseArea" label="房屋面积" placeholder="请输入建筑面积" />
      </div>
      <!-- 售价 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.houseArea" label="房屋售价" placeholder="请填写售价" />
      </div>
      <div class="add-input">
        <span>楼层</span>

        <p>
          <van-cell is-link :title="title.tit3" @click="show.actions3 = true" />

          <van-action-sheet v-model="show.actions3" :actions="actions3" @select="onSelect3" />
        </p>
      </div>
      <!-- 房屋总楼层 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.allFloor" label="房屋楼层" placeholder="请填写总层数" />
      </div>

      <div class="add-input">
        <span>朝向</span>

        <p>
          <van-cell is-link :title="title.tit4" @click="show.actions4 = true" />

          <van-action-sheet v-model="show.actions4" :actions="actions4" @select="onSelect4" />
        </p>
      </div>

      <div class="add-input">
        <span>装修</span>

        <p>
          <van-cell is-link :title="title.tit5" @click="show.actions5 = true" />

          <van-action-sheet v-model="show.actions5" :actions="actions5" @select="onSelect5" />
        </p>
      </div>
      <div class="add-input">
        <span>类型</span>

        <p>
          <van-cell is-link :title="title.tit6" @click="show.actions6 = true" />

          <van-action-sheet v-model="show.actions6" :actions="actions6" @select="onSelect6" />
        </p>
      </div>
      <div class="add-input">
        <span>房屋配套</span>

        <!-- <p>
          <van-cell is-link :title="title.tit7" @click="show.actions7 = true" />
          <van-action-sheet v-model="show.actions7" :actions="actions7" @select="onSelect7" />
        </p>-->
        <!-- <van-collapse v-model="activeNames">
          <van-collapse-item title="请输入" name="1">
            <div class="list">
              <li
                v-for="(item, ind) in assortList"
                :key="ind"
                @click="handleAssort(item, ind)"
                ref="assortRefs"
              >{{ item }}</li>
              <button @click="handleAssortConfirm">确定</button>
            </div>
          </van-collapse-item>
        </van-collapse>-->
        <!-- 房屋配套 -->
        <van-collapse v-model="activeNames">
          <van-collapse-item value="请选择">
            <div class="assort">
              <h4>房屋配套</h4>
              <div class="list">
                <li
                  v-for="(item, ind) in assortList"
                  :key="ind"
                  @click="handleAssort(item, ind)"
                  ref="assortRefs"
                >{{ item }}</li>
              </div>
              <button @click="handleAssortConfirm">确定</button>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div class="add-input">
        <span>特色标签</span>

        <!-- <p>
          <van-cell is-link :title="title.tit8" @click="show.actions8 = true" />

          <van-action-sheet v-model="show.actions8" :actions="actions8" @select="onSelect8" />
        </p>-->
        <van-collapse v-model="activeName">
          <van-collapse-item value="请选择">
            <van-checkbox-group v-model="AddSecond.Speciallabel" direction="horizontal">
              <van-checkbox name="近地铁">近地铁</van-checkbox>
              <van-checkbox name="临近医院">临近医院</van-checkbox>
              <van-checkbox name="有商场">有商场</van-checkbox>
              <van-checkbox name="学区房">学区房</van-checkbox>
            </van-checkbox-group>
          </van-collapse-item>
        </van-collapse>

        <!-- <van-checkbox-group v-model="AddSecond.Speciallabel" direction="horizontal">
          <van-checkbox name="近地铁">近地铁</van-checkbox>
          <van-checkbox name="临近医院">临近医院</van-checkbox>
          <van-checkbox name="有商场">有商场</van-checkbox>
          <van-checkbox name="学区房">学区房</van-checkbox>
        </van-checkbox-group>-->
      </div>
      <p class="add-title">更多信息</p>
      <!-- 房源标题 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.listingTitle" label="房源标题" placeholder="请填写房源标题" />
      </div>
      <!-- 联系人 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.contacts" label="联系人" placeholder="请填写联系人" />
      </div>
      <!-- 手机号 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.phone" label="手机号" placeholder="请填写手机号" />
      </div>
      <div class="add-input">
        <span>有效期</span>
        <p>
          <van-cell is-link :title="title.tit9" @click="show.actions9 = true" />

          <van-action-sheet v-model="show.actions9" :actions="actions9" @select="onSelect9" />
        </p>
      </div>
      <!-- 房源描述 -->
      <div class="publish-input">
        <van-field v-model="AddSecond.phone" label="房源描述" placeholder="请填写房源描述" />
      </div>
      <!-- 提交 -->
      <div class="btn">
        <button @click="changeSubmit">提交</button>
      </div>
    </div>
  </div>
</template>
<script>
// import { getAddAudit } from "../../API/request";
import { getAddList } from "@/api";
import { mapState } from "vuex";
import { Toast } from "vant";

export default {
  data() {
    return {
      activeNames: ["1"],
      activeName: ["1"],
      AddSecond: {
        housingName: "",

        area: "",

        detailAddress: "",

        housetype: "",

        houseArea: "",

        sellingprice: "",

        floor: "",

        allFloor: "",

        orientation: "",

        fitment: "",

        fitmentType: "",

        houseAssort: "",

        Speciallabel: [],

        img: "https://unsplash.it/400/600/?@name",

        listingTitle: "",

        contacts: "",

        phone: "",

        termValidity: "7天",

        listingDesc: "",

        classifyType: "2",

        status: 0,

        pv: 0
      },

      show: {
        actions1: false,

        actions2: false,

        actions3: false,

        actions4: false,

        actions5: false,

        actions6: false,

        actions7: false,

        actions8: false,

        actions9: false
      },

      title: {
        tit1: "请选择",

        tit2: "请选择户型",

        tit3: "低层",

        tit4: "请选择朝向",

        tit5: "请选择",

        tit6: "请选择",

        tit7: "请选择",

        tit8: "请选择",

        tit9: "7天"
      },
      actions1: [{ name: "黑龙江省" }, { name: "河北省" }, { name: "辽宁省" }],

      actions2: [
        { name: "3室两厅2卫1厨" },

        { name: "2室1厅" },

        { name: "1室1厅" }
      ],
      actions3: [{ name: "低层" }, { name: "中层" }, { name: "高层" }],

      actions4: [
        { name: "南" },

        { name: "东" },

        { name: "西" },

        { name: "北" },

        { name: "东北" },

        { name: "西北" },

        { name: "东南" },

        { name: "西南" }
      ],

      actions5: [
        { name: "精装" },

        { name: "毛坯" },

        { name: "豪装" },

        { name: "奢装" },

        { name: "简装" }
      ],

      actions6: [
        { name: "叙利亚" },

        { name: "北欧" },

        { name: "中式" },

        { name: "美式" }
      ],

      assortList: [
        "电视",
        "空调",
        "电梯",
        "洗衣机",
        "冰箱",
        "热水器",
        "沙发",
        "阳台",
        "床",
        "衣柜"
      ],

      actions8: [
        { name: "近地铁" },

        { name: "临近医院" },

        { name: "有商场" },

        { name: "学区房" }
      ],
      actions9: [{ name: "3天" }, { name: "7天" }, { name: "10天" }]
    };
  },
  computed: {
    ...mapState(["userId"])
  },
  methods: {
    onSelect1(item) {
      this.show.actions1 = false;

      this.AddSecond.detailAddress = item.name;

      this.title.tit1 = item.name;
    },

    onSelect2(item) {
      this.show.actions2 = false;

      this.AddSecond.housetype = item.name;

      this.title.tit2 = item.name;
    },

    onSelect3(item) {
      this.show.actions3 = false;

      this.AddSecond.floor = item.name;

      this.title.tit3 = item.name;
    },

    onSelect4(item) {
      this.show.actions4 = false;

      this.AddSecond.orientation = item.name;

      this.title.tit4 = item.name;
    },

    onSelect5(item) {
      this.show.actions5 = false;

      this.AddSecond.fitment = item.name;

      this.title.tit5 = item.name;
    },

    onSelect6(item) {
      this.show.actions6 = false;

      this.AddSecond.fitmentType = item.name;

      this.title.tit6 = item.name;
    },

    onSelect7(item) {
      this.show.actions7 = false;

      this.AddSecond.houseAssort = item.name;

      this.title.tit7 = item.name;
    },

    onSelect8(item) {
      this.show.actions8 = false;

      this.AddSecond.Speciallabel = item.name;

      this.title.tit8 = item.name;
    },

    onSelect9(item) {
      this.show.actions9 = false;

      this.AddSecond.termValidity = item.name;

      this.title.tit9 = item.name;
    },
    SpeciallabelInd: "",
    // changeSubmit(userId) {
    //   getAddList(this.AddSecond,userId).then(res => {
    //     console.log(res, "resss");
    //     Toast.success(res.msg);
    //     this.$router.push("/second");
    //   });
    // },
    changeSubmit() {
      getAddList(this.AddSecond).then(res => {
        console.log(res, "resss");
        Toast.success(res.msg);
        // this.$router.push("/second");
      });
    },
    changeToback() {
      this.$router.go(-1);
    },
    // 配套
    handleAssort(item, ind) {
      //房屋配套
      console.log(this.$refs.assortRefs[ind].innerHTML, "assortRefs");
      this.$refs.assortRefs[ind].classList.toggle("active");
    },
    handleAssortConfirm() {
      //房屋配套确认
      let result = this.$refs.assortRefs
        .filter(item => item.className === "active")
        .map(item => {
          return item.innerHTML;
        });
      console.log(result);

      this.AddSecond.houseAssort = result;

      console.log(result, "result");
    },
    changeSpeciallabel(val, index) {
      console.log(val, index, "7888");
      this.SpeciallabelInd = index;
      this.AddSecond.Speciallabel = val;
    }
  }
};
</script>

<style scoped>
.assort > h4 {
  text-align: center;
}
.assort > .list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.assort > .list > li {
  margin-right: 20px;
  width: 80px;
  text-align: center;
  left: 30px;
  margin-top: 10px;
  border: 1px #000 solid;
}
.assort > .list > li > .active {
  /* background: rgb(235, 212, 135); */
  border: 0;
}
.assort > button {
  width: 100%;
  height: 40px;
  /* background: rgb(85, 196, 94); */
  border-radius: 8px;
  margin-top: 10px;
  /* color: #fff; */
  border: 0;
}

.header-box {
  height: 50px;

  /* border-bottom: 1px solid #ccc; */

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-left: 5px;

  padding-right: 15px;
}

.header-box b {
  margin-left: 17px;
}

.addMySecond {
  flex: 1;
  overflow-y: auto;
}

.add-title {
  /* background: rgba(242, 242, 242, 1); */

  height: 42px;

  display: flex;

  align-items: center;

  padding-left: 10px;

  font-weight: bold;

  /* border-bottom: 1px solid #ccc; */
}

.add-input {
  height: 54px;

  /* border-bottom: 1px solid #ccc; */

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 15px 0 10px;
}

.add-input input {
  height: 100%;

  border: 0;

  text-align: right;
}

.add-input input::placeholder {
  /* color: #aaa; */
}

.van-cell {
  font-size: 17px;

  padding-right: 0;

  /* color: #aaa; */
}

.van-cell i {
  width: 20px;

  font-size: 26px;

  margin: 0;
}

.btn {
  padding: 30px 10px 10px;
}

.btn button {
  width: 100%;

  height: 40px;

  border-radius: 8px;

  background: rgba(22, 155, 213, 1);

  color: #fff;

  border: 0;
}
</style>